<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src='../vue.js'></script>
    
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>键盘事件</h1>
        <input type="text"
         @keyup.space="space()" 
         @keydown.tab="tab" 
         @keyup.up="up" 
         @keydown.left="left"> </input>
       
    </div>
    
</body>
    <script type='text/javascript'>
        new Vue({ 
                el: '#root',
                data: {
                    key:"value"
                },
                methods: {
                    space(){
                        console.log("空格被按了")
                    },
                    tab(){
                        console.log("tab被按了")
                    },
                    up(){
                        console.log("上键被按了")
                    },
                    left(){
                        console.log("左键被按了")
                    }
                },
            })
    </script>
    
    
</html>